<template>
  <div class="bb-custom-wrapper picbookMain">
    <div class="back" @touchend="backTouch"></div>
    <div class="picbook">
      <div class="pencil"></div>
      <div class="border"></div>
      <div class="title">
        <span>{{picbook.detail.picbookname}}</span>
      </div>
      <div class="head">
        <div class="icon"></div>
      </div>
      <div class="praiseBase">
        <div class="praise" :style="praiseStyle" @touchend.stop="praiseTouch"></div>
      </div>
      <div v-if="picbook.detail.nickname" class="name">{{picbook.detail.nickname}}</div>
      <!-- 内容 -->
      <div id="bb-bookblock" class="bb-bookblock main " @touchstart="start" @touchmove="move" @touchend="end">
        <div class="bb-item" style="background:none" v-for="(item,index) in picbook.content" :key="index">
          <div class="content" :style="contentStyle(item.scene)">
            <v-touch v-for="imagery in item.imagery" :key="imagery.produceEryId" @tap="imageryTouch(imagery)"
              :style="imageryStyle(imagery)"> </v-touch>
            <v-touch v-for="role in item.role" :key="role.produceRoleId+999" @tap="roleTouch(role)"
              :style="roleStyle(role)">
            </v-touch>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex"
export default {
  data() {
    return {
      picbook: {},
      book: null,
      moveX: 0,
      isPressSwiper: false
    }
  },
  created() {
    this.picbook = this.$route.query.picbookId ? this.communityList.filter(item => { return item.id === this.$route.query.picbookId })[0].content :
      this.userProduceList.filter(item => { return item.detail.produceId === this.$route.query.produceId })[0]
  },
  mounted() {
    this.book = $('#bb-bookblock')
    this.book.bookblock({
      speed: 800,
      shadowSides: 0.8,
      shadowFlip: 0.7,
      shadows: true
    })
  },
  computed: {
    contentStyle(scene) {
      return function (scene) {
        const background = scene ? scene : this.variable.STATICE_URLTITLE + "produce/默认场景.png"
        return {
          background: "url(" + background + ")0 0/100% 100%"
        }
      }
    },
    imageryStyle(imagery) {
      return function (imagery) {
        return {
          position: "absolute",
          background: "url(" + imagery.eryImgInWorld + ")0 0/100% 100%",
          width: imagery.widthInWorld,
          height: imagery.heightInWorld,
          top: imagery.topInWorld,
          left: imagery.leftInWorld
        }
      }
    },
    roleStyle(role) {
      return function (role) {
        return {
          position: "absolute",
          background: "url(" + role.imageUrl + ")0 0/100% 100%",
          width: role.width,
          height: role.height,
          top: role.topInWorld,
          left: role.leftInWorld
        }
      }
    },
    //点赞图
    praiseStyle() {
      const background = this.collectionIdList.indexOf(this.$route.query.picbookId) > -1 ? "community/点赞-已点击.png" : "community/点赞-未点击.png"
      return {
        background: "url(" + this.variable.STATICE_URLTITLE + background + ")0 0/100% 100%"
      }
    },
    ...mapGetters("produceStatus", {
      communityList: "getCommunityList",
      userProduceList: "getUserProduceList",
      collectionIdList: "getCollectionIdList"
    })
  },
  methods: {
    backTouch: function () {
      this.touchMusic()
      this.setLoading({
        callback: () => {
          this.$router.go(-1)
        }
      })
    },
    //点赞
    praiseTouch: function () {
      this.clickMusic()
      const index = this.collectionIdList.indexOf(this.$route.query.picbookId)
      index > -1 ? this.collectionIdList.splice(index, 1) : this.collectionIdList.push(this.$route.query.picbookId)
      this.userSaveDate("collectionIdList", this.collectionIdList)
    },
    imageryTouch: function (imagery) {
      this.clickMusic()
      //显示卡片
      this.setPackCard({
        type: "imagery",
        icon: imagery.icon,
        content: imagery
      })
    },
    roleTouch: function (role) {
      this.clickMusic()
      //显示卡片
      this.setPackCard({
        type: "role",
        icon: role.imageUrl,
        content: role
      })
    },
    start: function (event) {
      this.moveX = event.changedTouches[0].clientX
    },
    move: function (event) {
      if (this.isPressSwiper) return
      if (event.changedTouches[0].clientX - this.moveX > 50) {
        this.bookMusic()
        this.book.bookblock('prev')
        this.isPressSwiper = true
      }
      if (event.changedTouches[0].clientX - this.moveX < - 50) {
        this.bookMusic()
        this.book.bookblock('next')
        this.isPressSwiper = true
      }
    },
    end: function () {
      this.moveX = 0
      this.isPressSwiper = false
    },
    ...mapActions("mainStatus", ["setLoading"]),
    ...mapActions("packStatus", ["setPackCard"]),
    ...mapActions("produceStatus", ["setCommunityList"])
  }
}
</script>

<style lang="stylus" scoped>
.picbookMain
  position absolute
  width 100vw
  height 100vh
  background url($urlTitle + 'newList/详情背景.png') 0 0 / 100% 100%
  transform translate(calc(0px - var(--X)), calc(0px - var(--Y)))
  .picbook
    $coord('WHLT', 155.55vh, 85vh, 50%, 50%)
    box-sizing border-box
    border 3vh solid white
    background white
    transform translate(-50%, -45%) scale(0.9)
    box-shadow -0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.2)
    border-radius 0.5rem
    .pencil
      background url($urlTitle + 'produce/pencil.png') 0 0 / 100% 100%
      $coord('WHRB', 15vh, 20vh, -18vh, 10vh)
      z-index 99
    .border
      $coord('WHLT', 100%, 100%, 0, 0)
      transform scale(1.065, 1.11)
      pointer-events none
      background url($urlTitle + 'produce/上传装饰.png') 0 0 / 100% 100%
      z-index 99
    .title
      $coord('WHLT', 50vh, 9vh, 2vh, -6vh)
      background url($urlTitle + 'community/绘本标题背景.png') 0 0 / 100% 100%
      z-index 99
      span
        color white
        width 100%
        height 100%
        letter-spacing 0.5vh
        font-size 3.5vh
        transform rotate(-2.5deg)
        display inline-block
        $alignCenter()
        margin-top -0.5vh
    .head
      $coord('WHLB', 2.5rem, 2.5rem, 2vh, 2vh)
      background url($urlTitle + 'personals/未登录-头像框背景.png') 0 0 / 100% 100%
      z-index 99
      .icon
        width 2rem
        height 2rem
        margin 0.5rem 0 0 0.25rem
        background url($urlTitle + 'personals/未登录-头像.png') 0 0 / 100% 100%
    .name
      $coord('WHLB', 8rem, 1.5rem, 2.5rem, 2vh)
      text-align left
      width auto
      box-sizing border-box
      padding 0 0.5rem
      background #ff9024
      color white
      transform translate3d(2.5vh, 0, 0)
      border-radius 0.2rem
      box-shadow 0 0 0.1rem rgba(0, 0, 0, 0.3)
      font-size 1rem
      line-height 1.5rem
      z-index 99
    .praiseBase
      $coord('WHRB', 2.5rem, 2.5rem, 2vh, 2vh)
      background white
      border-radius 50%
      filter drop-shadow(1px 1px 1px #d8d4d499)
      z-index 99
      .praise
        $coord('WHLT', 1.2rem, 1rem, 0.65rem, 0.8rem)
    .main
      position absolute
      width 100%
      height 100%
      z-index 98
    .content
      position absolute
      width 100%
      height 100%
      border-radius 0.5rem
      overflow hidden
  .back
    background url($urlTitle + 'icon/icon-返回.png') 0 0 / 100% 100%
    $coord('WHLT', 11vh, 10.8vh, 3rem, 1rem)
</style>
